<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>vue中的v-for</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in arr">
                    {{ index + 1 }}{{ item }}
                </li>
			</ul>
            <ul>
				<li v-for="(item,index) in food" :title="item.name">
                    {{ index + 1 }}{{ item.name }}
                </li>
			</ul>
            <button @click="add">添加数据</button>
            <button @click="remove">移除数据</button>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				arr: ['北京', '上海', '重庆', '深圳'],
                food:[
                    {name:'西兰花炒鸡蛋'},
                    {name:'西红柿炒鸡蛋'},
                ]
			},
            methods:{
                add(){
                    this.food.push({name:'鸡胸肉'})
                },
                remove(){
                    this.food.shift()
                }
            }
		})
	</script>
</html>
